<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;list-style-type:none;}
		a,img{border:0;}
		/* banner */
		#banner{margin:30px auto 0px auto;width:950px;height:400px;}
		.slides{margin:0px auto;width:950px;height:400px;overflow:hidden;position:relative;}
		.slide-pic{width:950px;overflow:hidden;list-style:none;}
		.slide-pic img{width:950px;height:400px;}
		.slide-pic li {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.slide-pic li.cur {
			z-index: 1;
		}

		.slide-li {
			left: 0;
			bottom: 0;
			position: absolute;
			z-index: 10;
		}

		.slide-li li{width:190px;height:30px;float:left;overflow:hidden;list-style:none;}
		.slide-li a{width:190px;height:30px;color:#000;font-size:12px;display:block;}
		.slide-li a:hover{color:#F00;text-decoration:none;}
		.op li{background:#999999;filter:alpha(opacity=60);opacity:0.6;}
		.op li.cur{background: red;}

        .prev, .next {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #fff;
            right: 0;
            top: 50%;
            margin-top: -25px;
            z-index: 999;
        }

        .prev {
            right: auto;
            left: 0;
        }
	</style>
	<script src="../lib/jquery-1.12.1.min.js"></script>
	<script>
	$(document).ready(function() {

		var fadeTransition = function(selector) {
			var $target = $(selector),
				$slideLi = $target.find('.slide-li > li'),
				$sliderPic = $target.find('.slide-pic > li'),
                timer;

			$sliderPic.each(function(i) {
				$(this).attr('index', i);
			});

			$slideLi.on('click', function() {
				var $this = $(this),
					currIndex = $this.index(),
					oldIndex = $this.siblings('.cur').index();

				$this.addClass('cur').siblings('.cur').removeClass('cur');

				$sliderPic.eq(oldIndex).before($sliderPic.eq(currIndex));

				$target.find('.slide-pic > li').each(function(i) {
					$(this).css('z-index', $sliderPic.length - i - 1);
				});

				$sliderPic.eq(oldIndex).show().fadeOut();

				$target.find('.slide-pic').find('li[index='+currIndex+']').hide().fadeIn();

				// console.log($target.find('.slide-pic').find('li[index='+currIndex+']'));

				// console.log('currIndex: ' + currIndex);
				// console.log('oldIndex: ' + oldIndex);

			});

            $target.find('a.next, a.prev').on('click', function() {
                var $this = $(this);
                var oldIndex = $slideLi.filter('.cur').index();

                oldIndex++;

                if (oldIndex == $slideLi.length) {
                    oldIndex = 0;
                }

                console.log(oldIndex);

                $slideLi.eq(oldIndex).trigger('click');

            });

            timer = setInterval(function() {
                $target.find('a.next').trigger('click');
            }, 2000);

            // TODO

		};

		fadeTransition('.slides');
	});
	</script>
</head>
<body>

	<div id="banner">
		<div class="slides">
			<ul class="slide-pic">
				<li class="cur">
					<a href="javascript:;">
						<img width="950" height="400" src="http://www.17sucai.com/preview/1162/2013-10-19/%E7%AE%80%E6%B4%81%E7%9A%84%E4%BA%94%E5%B1%8F%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BAjQuery%E7%84%A6%E7%82%B9%E5%9B%BE%E4%BB%A3%E7%A0%81/images/banner_1.jpg" />
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img width="950" height="400" src="http://www.17sucai.com/preview/1162/2013-10-19/%E7%AE%80%E6%B4%81%E7%9A%84%E4%BA%94%E5%B1%8F%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BAjQuery%E7%84%A6%E7%82%B9%E5%9B%BE%E4%BB%A3%E7%A0%81/images/banner_2.jpg" />
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img width="950" height="400" src="http://www.17sucai.com/preview/1162/2013-10-19/%E7%AE%80%E6%B4%81%E7%9A%84%E4%BA%94%E5%B1%8F%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BAjQuery%E7%84%A6%E7%82%B9%E5%9B%BE%E4%BB%A3%E7%A0%81/images/banner_3.jpg" />
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img width="950" height="400" src="http://www.17sucai.com/preview/1162/2013-10-19/%E7%AE%80%E6%B4%81%E7%9A%84%E4%BA%94%E5%B1%8F%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BAjQuery%E7%84%A6%E7%82%B9%E5%9B%BE%E4%BB%A3%E7%A0%81/images/banner_4.jpg" />
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img width="950" height="400" src="http://www.17sucai.com/preview/1162/2013-10-19/%E7%AE%80%E6%B4%81%E7%9A%84%E4%BA%94%E5%B1%8F%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BAjQuery%E7%84%A6%E7%82%B9%E5%9B%BE%E4%BB%A3%E7%A0%81/images/banner_5.jpg" />
					</a>
				</li>
			</ul>
			<ul class="slide-li op">
				<li class="cur">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>

            <a class="next" href="javascript:;"></a>
            <a class="prev" href="javascript:;"></a>
			<!-- <ul class="slide-li slide-txt">
				<li class="cur"><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul> -->
		</div>
	</div>
	
</body>
</html>